<template>
  <div id="new-songs">
    <div class="switch-btns">
      <div @click="select" class="btn-list">
        <button :class="{ 'isActive': btnG }" class="courier-btn pointer">新歌速递</button>
        <button :class="{ 'isActive': !btnG }" class="newdisc-btn pointer">新碟上架</button>
      </div>
    </div>
    <div class="zuixin" v-if="btnG">
      <div class="operation">
        <Tabs :tabList="tabList" @target="id => getZuixinMusic(id)">
          <template #other>
            <a-button class="br-30 play-all" type="danger" @click="playAll">
              <a-icon class="font-20" type="caret-right" />播放全部
            </a-button>
          </template>
        </Tabs>
      </div>
      <!-- 最新音乐列表 -->
      <div class="zuixin-list">
        <a-skeleton
          :paragraph="{ rows: 5 }"
          :loading="isShow"
          :title='false'
          active
        >
          <InfoList :infoList="newList" />
        </a-skeleton>
      </div>
    </div>
    <div class="xindie" v-else>
      <div class="operation">
        <h1 style="fontWeight: 700;">本周新碟</h1>
        <!-- <Tabs
          :tabList="xindieList"
          @target="id => $set(params, 'area', id)"
        />
        <Tabs
          :tabList="xindieHot"
          @target="id => $set(params, 'type', id)"
        /> -->
      </div>
      <!-- 新碟上架列表 -->
      <div class="zuixin-list">
        <a-skeleton
          :paragraph="{ rows: 8 }"
          :loading="isShow"
          :title='false'
          active
        >
          <ContentCard :dataList="discList" @goDetail="goDetail">
            <template #xindieName>
              <span
                v-for="info in xindieName"
                :key="info.id"
                :title="info.name"
                style="color: rgb(159, 159, 159);"
                class="text-hidden singer"
              >
                {{ info.name }} 
              </span>
            </template>
          </ContentCard>
        </a-skeleton>
      </div>
    </div>
  </div>
</template>

<script>
import { zuixinMusic, topAlbum } from '@/api';
import { Skeleton } from 'ant-design-vue';
import Tabs from '@/components/Content/Tabs';
import InfoList from '@/components/Content/InfoList';
import ContentCard from '@/components/Content/ContentCard';

export default {
  name: 'NewSongs',

  components: {
    Tabs,
    InfoList,
    ContentCard,
    ASkeleton:Skeleton,
  },

  data() {
    return {
      tabList: [{
        tabName: '全部',
        isActive: true,
        id: 0
      }, {
        tabName: '华语',
        isActive: false,
        id: 7
      }, {
        tabName: '欧美',
        isActive: false,
        id: 96
      }, {
        tabName: '日本',
        isActive: false,
        id: 8
      }, {
        tabName: '韩国',
        isActive: false,
        id: 16
      }],
      // xindieList: [{
      //   tabName: '全部',
      //   isActive: true,
      //   id: 'ALL'
      // }, {
      //   tabName: '华语',
      //   isActive: false,
      //   id: 'ZH'
      // }, {
      //   tabName: '欧美',
      //   isActive: false,
      //   id: 'EA'
      // }, {
      //   tabName: '日本',
      //   isActive: false,
      //   id: 'JP'
      // }, {
      //   tabName: '韩国',
      //   isActive: false,
      //   id: 'KR'
      // }],
      // xindieHot: [{
      //   tabName: '最新',
      //   isActive: true,
      //   id: 'new'
      // }, {
      //   tabName: '最热',
      //   isActive: false,
      //   id: 'hot'
      // }],
      // 最新歌曲列表
      newList: [],
      // 新碟上架列表
      discList: [],
      // 控制按钮背景色
      btnG: true,
      // 控制骨架屏的显示
      isShow: true,
      // 新碟上架参数
      params: {
        limit: 30, // 取出数量 , 默认为 50
        offset: 0, // 偏移数量 , 用于分页 , 如 :( 页数 -1)*50, 其中 50 为 limit 的值 , 默认 为 0
        area: 'ALL', // ALL:全部,ZH:华语,EA:欧美,KR:韩国,JP:日本
        type: 'new', // new:全部 hot:热门,默认为 new
      }
    };
  },

  watch: {
    params: {
      handler() {
        this.getTopAlbum();
      },
      deep: true
    }
  },

  mounted() {
    // 首次进入默认获取全部最新歌曲
    this.getZuixinMusic(0);
  },

  methods: {
    // 获取筛选歌曲类型id
    // target(id) {
    //   this.getZuixinMusic(id);
    // },
    async getZuixinMusic(type) {
      // 进入组件时,显示骨架屏
      this.isShow = true;
      await zuixinMusic(type).then(res => {
        this.newList = Object.freeze(res.data.data);
      }).finally(() => {
        this.isShow = false;
      })
    },
    async getTopAlbum() {
      this.isShow = true;
      await topAlbum(this.params).then(res => {
        this.discList = Object.freeze(res.data.weekData);
      }).finally(() => {
        this.isShow = false;
      })
    },
    playAll() {
      console.log(this.newList)
      // 当前需要播放的音乐信息
      this.$store.commit('main/ISPLAYED', true);
      this.$store.commit('detail/AUDIOID', this.newList[0]);
      this.$store.commit('detail/AUDIOLIST', this.newList);
    },
    select(event) {
      const btn1 = document.querySelector('.courier-btn'),
        // btn2 = document.querySelector('.newdisc-btn'),
        target = event.target;
      if (target.innerText === btn1.innerText) {
        this.btnG = true;
      } else {
        this.btnG = false;
        this.getTopAlbum();
      }
    },
    // 点击跳转详情页
    goDetail(id) {
      this.$router.push({
        name: 'albumdetail',
        query: { id }
      });
    }
  },
};
</script>

<style lang="less" scoped>
#new-songs {
  .switch-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    .btn-list {
      display: flex;
      width: 200px;
      height: 35px;
      border: 1px solid #bbb;
      border-radius: 16px;
      .courier-btn, .newdisc-btn {
        flex: 1;
        border-radius: 16px;
        color: #373737;
        background: transparent;
        border: none;
        &:hover {
          background: #f4f4f4;
          color: #373737;
        }
      }
      .isActive {
        background: #bbb;
        color: #fff;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;/*firefox*/
        -moz-transition: all border-left-color.4s ease-in-out;/*Safari 和 Chrome*/
        -o-transition: all .4s ease-in-out;/*oprea*/
      }
    }
  }
  .singer {
    display: inline-block;
    width: 100%;
  }
  .operation {
    /deep/ul.tab-list {
      margin-left: 0 !important;
    }
    /deep/li.tab-item.isActive {
      &::after {
        background: transparent;
      }
    }
  }
  // /deep/.ant-skeleton-content .ant-skeleton-paragraph > li {
  //   height: 80px;
  // }
  // /deep/.ant-btn > .anticon + span,
  // /deep/.ant-btn > span + .anticon {
  //   margin-left: 0;
  //   line-height: 1.2;
  // }
}
</style>